<template>
  <dialog v-if="currentMessageBox" class="modal modal-open">
    <div class="modal-box">
      <!-- 标题和关闭按钮 -->
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-bold text-lg text-base-content">{{ title || '提示' }}</h3>
        <button
          v-if="showCloseButton"
          class="btn btn-sm btn-circle btn-ghost text-base-content"
          @click="handleClose"
        >
          <i-fa7-solid-times />
        </button>
      </div>

      <div class="flex items-start mb-4">
        <!-- 图标 -->
        <div v-if="icon !== 'none'" class="mr-3 mt-1 select-none flex-shrink-0" :class="iconClass">
          <i-fa7-solid-circle-check v-if="icon === 'success'" class="text-4xl" />
          <i-fa7-solid-circle-xmark v-if="icon === 'error'" class="text-4xl" />
          <i-fa7-solid-triangle-exclamation v-if="icon === 'warning'" class="text-4xl" />
          <i-fa7-solid-circle-info v-if="icon === 'info'" class="text-4xl" />
        </div>

        <!-- 内容 -->
        <p class="whitespace-pre-line">{{ message }}</p>
      </div>

      <!-- 按钮组 -->
      <div class="modal-action justify-end mt-6">
        <button
          v-for="(btnText, index) in buttonLabels"
          :key="index"
          class="messagebox-btn btn ml-2"
          :class="buttonClass(index)"
          @click="handleButtonClick(index)"
        >
          {{ btnText }}
        </button>
      </div>
    </div>

    <!-- 遮罩层，阻止点击穿透 -->
    <div v-if="allowCloseOnBackdrop" class="modal-backdrop" @click="handleClose"></div>
  </dialog>
</template>

<script setup lang="ts">
const uiStore = useUIStore()
const { currentMessageBox } = storeToRefs(uiStore)
const { handleMessageBoxResult, handleMessageBoxClose } = uiStore

// 按钮标签
const buttonLabels = computed(() => {
  if (!currentMessageBox.value) return []
  const buttonType = currentMessageBox.value.options.button
  return buttonTextMap[buttonType] || ['确定']
})

// 图标相关
const icon = computed(() => currentMessageBox.value?.options.icon || 'info')
const iconClass = computed(() => {
  const map: Record<string, string> = {
    success: 'text-success',
    error: 'text-error',
    warning: 'text-warning',
    info: 'text-info',
    none: 'hidden',
  }
  return map[icon.value] || 'text-info'
})

// 标题 & 消息
const title = computed(() => currentMessageBox.value?.options.title)
const message = computed(() => currentMessageBox.value?.options.message || '')

// 是否显示右上角关闭按钮
const showCloseButton = computed(() => {
  if (!currentMessageBox.value) return false
  const btn = currentMessageBox.value.options.button
  return btn === 'ok' || btn === 'ok-cancel' || btn === 'yes-no-cancel'
})

// 是否允许点击遮罩关闭
const allowCloseOnBackdrop = computed(() => showCloseButton.value)

// 按钮样式（默认按钮高亮）
const buttonClass = (index: number) => {
  if (!currentMessageBox.value) return 'btn-primary'
  const defaultIndex = currentMessageBox.value.options.defaultButton ?? 0
  return index === defaultIndex ? 'btn-primary' : 'btn-outline'
}

// 处理按钮点击
const handleButtonClick = (index: number) => {
  if (!currentMessageBox.value) return

  const buttonType = currentMessageBox.value.options.button
  const resultMap: Record<MessageBoxButton, MessageBoxResult[]> = {
    ok: ['ok'],
    'yes-no': ['yes', 'no'],
    'ok-cancel': ['ok', 'cancel'],
    'abort-retry-ignore': ['abort', 'retry', 'ignore'],
    'yes-no-cancel': ['yes', 'no', 'cancel'],
  }

  const results = resultMap[buttonType] || ['ok']
  const result = results[index] || 'ok'

  handleMessageBoxResult(result)
}

// 处理关闭（遮罩/右上角X）
const handleClose = () => {
  handleMessageBoxClose()
}
</script>
